
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Filters - vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Source+Code+Pro|Dosis:300,500' rel='stylesheet' type='text/css'>
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = "api"
        </script>
        <link rel="stylesheet" href="/css/page.css" type="text/css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li>
  <form id="search-form">
    <input type="text" id="search-query" class="st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link current">API Reference</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>

    </ul>
</div>
            <div id="main">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li>
  <form id="search-form">
    <input type="text" id="search-query" class="st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link current">API Reference</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>

    </ul>
    <div class="list">
        <h2>Api</h2>
        <ul class="menu-root">
            
                <li>
                    <a href="/api/index.html" class="sidebar-link">Overview</a>
                </li>
            
                <li>
                    <a href="/api/options.html" class="sidebar-link">Component Options</a>
                </li>
            
                <li>
                    <a href="/api/instance-properties.html" class="sidebar-link">Instance Properties</a>
                </li>
            
                <li>
                    <a href="/api/instance-methods.html" class="sidebar-link">Instance Methods</a>
                </li>
            
                <li>
                    <a href="/api/global-api.html" class="sidebar-link">Global API</a>
                </li>
            
                <li>
                    <a href="/api/directives.html" class="sidebar-link">Directives</a>
                </li>
            
                <li>
                    <a href="/api/filters.html" class="sidebar-link current">Filters</a>
                </li>
            
                <li>
                    <a href="/api/elements.html" class="sidebar-link new">Special Elements</a>
                </li>
            
            <li><a href="http://legacy.vuejs.org">Looking for 0.11 docs?</a></li>
            <li style="margin:10px 0 3px">
              <script data-gittip-username="yyx990803"
                data-gittip-widget="button"
                src="//gttp.co/v1.js"></script>
            </li>
        </ul>
    </div>
</div>


<div class="content api with-sidebar">
    <h1>Filters</h1>
    <div id="ad">
        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
    </div>
    <h3 id="capitalize">capitalize</h3><p><em>‘abc’ =&gt; ‘Abc’</em></p>
<h3 id="uppercase">uppercase</h3><p><em>‘abc’ =&gt; ‘ABC’</em></p>
<h3 id="lowercase">lowercase</h3><p><em>‘ABC’ =&gt; ‘abc’</em></p>
<h3 id="currency">currency</h3><ul>
<li>this filter takes one optional argument</li>
</ul>
<p><em>12345 =&gt; $12,345.00</em></p>
<p>You can pass an optional argument which will be used as the currency symbol (default is $).</p>
<h3 id="pluralize">pluralize</h3><ul>
<li>this filter takes at least one argument</li>
</ul>
<p>Pluralizes the argument based on the filtered value. When there is exactly one arg, plural forms simply add an “s” at the end. When there are more than one argument, the arguments will be used as array of strings corresponding to the single, double, triple … forms of the word to be pluralized. When the number to be pluralized exceeds the length of the args, it will use the last entry in the array.</p>
<p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123;count&#125;&#125; &#123;&#123;count | pluralize 'item'&#125;&#125;</span><br></pre></td></tr></table></figure>
<p><em>1 =&gt; ‘1 item’</em><br><em>2 =&gt; ‘2 items’</em></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123;date&#125;&#125;&#123;&#123;date | pluralize 'st' 'nd' 'rd' 'th'&#125;&#125;</span><br></pre></td></tr></table></figure>
<p>Will result in:</p>
<p><em>1 =&gt; ‘1st’</em><br><em>2 =&gt; ‘2nd’</em><br><em>3 =&gt; ‘3rd’</em><br><em>4 =&gt; ‘4th’</em><br><em>5 =&gt; ‘5th’</em></p>
<h3 id="json">json</h3><ul>
<li>this filter takes one optional argument</li>
</ul>
<p>JSON.stringify() incoming value rather than outputting the string representation (i.e. <code>[object Object]</code>). It also takes one optional argument which is the indent level (defaults to 2):</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">pre</span>&gt;</span>&#123;&#123;$data | json 4&#125;&#125;<span class="tag">&lt;/<span class="title">pre</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="key">key</h3><ul>
<li>this filter only works with <code>v-on</code></li>
<li>this filter takes exactly one argument</li>
</ul>
<p>Wrap the handler so it only gets called when the keyCode matches the argument. You can also use string aliases for a few commonly-used keys:</p>
<ul>
<li>enter</li>
<li>tab</li>
<li>delete</li>
<li>esc</li>
<li>up</li>
<li>down</li>
<li>left</li>
<li>right</li>
<li>space</li>
</ul>
<p><strong>Example:</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">input</span> <span class="attribute">v-on</span>=<span class="value">"keyup:doSomething | key 'enter'"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><code>doSomething</code> will only be called when the Enter key is pressed.</p>
<h3 id="debounce">debounce</h3><ul>
<li>this filter only works with <code>v-on</code></li>
<li>this filter takes one optional argument</li>
</ul>
<p>Wrap the handler to debounce it for X milliseconds, where X is the argument. Default is 300ms. A debounced handler will be delayed until at least X ms has passed after the call moment; if the handler is called again before the delay period, the delay period is reset to X ms.</p>
<h3 id="filterBy">filterBy</h3><p><strong>Syntax:</strong> <code>filterBy searchKey [in dataKey...]</code>.</p>
<ul>
<li>this filter only works for Array values</li>
</ul>
<p>Return a filtered version of the source Array. The <code>searchKey</code> argument is a property key on the context ViewModel. The value of that property will be used as the string to search for:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">input</span> <span class="attribute">v-model</span>=<span class="value">"searchText"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"users | filterBy searchText"</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>When the filter is applied, it will filter the <code>users</code> Array by recursively searching for the current value of <code>searchText</code> on each item in the Array. For example, if an item is <code>{ name: &#39;Jack&#39;, phone: &#39;555-123-4567&#39; }</code> and <code>searchText</code> has value <code>&#39;555&#39;</code>, the item will be considered a match.</p>
<p>Optionally, you can narrow down which specific property to search in with the optional <code>in dataKey</code> argument:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">input</span> <span class="attribute">v-model</span>=<span class="value">"searchText"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | filterBy searchText in 'name'"</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>Now the item will only match if the value of <code>searchText</code> is found in its <code>name</code> property. Note here we need to quote <code>name</code> to indicate it’s a literal string argument. With this limitation, <code>searchText</code> with value <code>&#39;555&#39;</code> will no longer match this item, but <code>&#39;Jack&#39;</code> will.</p>
<blockquote>
<p>New in 0.12.11</p>
</blockquote>
<p>Starting in 0.12.11 you can pass in multiple data keys:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | filterBy searchText in 'name' 'phone'"</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>Or pass in a dynamic argument with an Array value:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- fields = ['fieldA', 'fieldB'] --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | filterBy searchText in fields"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>Or, just pass in a custom filter function:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | filterBy myCustomFilterFunction"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="orderBy">orderBy</h3><p><strong>Syntax:</strong> <code>orderBy sortKey [reverseKey]</code>.</p>
<ul>
<li>this filter only works for Array values</li>
</ul>
<p>Return a sorted version of the source Array. The <code>sortKey</code> argument is a property key on the context ViewModel. The value of that property will be used as the key to sort the Array items with. The optional <code>reverseKey</code> argument is also a property key on the context ViewModel, but the value’s truthiness will determine whether the result should be reversed.</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | orderBy field reverse"</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  <span class="comment">/* ... */</span></span><br><span class="line">  data: &#123;</span><br><span class="line">    field: <span class="string">'name'</span>,</span><br><span class="line">    reverse: <span class="literal">false</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>You can also use quotes for literal sort key. To indicate a literal reverse, use <code>-1</code>:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | orderBy 'name' -1"</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

    <div class="footer">Caught a mistake or want to contribute to the documentation? <a href="https://github.com/vuejs/vuejs.org" target="_blank">Fork this site on Github</a>!</div>
</div>
                
            </div>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        

        <script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        </script>
    </body>
</html>
